import React, { memo, useEffect } from "react";
import AnkingWarrper from "./style";
import { useDispatch, useSelector } from "react-redux";
import { getAnkingInfo } from "@/store/modules/anking";
import { useNavigate } from "react-router-dom";
import SongSheetItem from "@/components/song-sheet-item/index";

const index = memo(() => {
  const dispatch = useDispatch();
  const navigate = useNavigate()
  useEffect(() => {
    if(ankingData.length<=0){
      dispatch(getAnkingInfo());
    }
  }, []);
  const { ankingData } = useSelector((state) => {
    return {
      ankingData: state.anking.ankingData,
    };
  });
  const goToDetail = (id) => {
    navigate("/playlistDetail/" + id);
  };
  return (
    <AnkingWarrper>
      <ul className="top">
        {ankingData?.slice(0, 4)?.map((n, i) => {
          return (
            <li className="top-item" key={i} onClick={e=>goToDetail(n.id)}>
              <img src={n.coverImgUrl} alt="" />
              <div className="title">
                <h3>{n.name}</h3>
                <ol>
                  {
                    n?.tracks?.map((n,i)=>{
                      return <li key={i}>{i+1}&nbsp;{n.first}-{n.second}</li>
                    })
                  }
                </ol>
              </div>
            </li>
          );
        })}
      </ul>
      <h3>全球媒体榜</h3>
      <div className="secound">
        {
          ankingData?.slice(4)?.map((n, i) => {
              return <SongSheetItem n={n} key={i} i={i} type="B"/>
          })
        }
      </div>
    </AnkingWarrper>
  );
});

export default index;
